<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="名称" prop="pricetactics">
        <el-input
          v-model="queryParams.pricetactics"
          placeholder="请输入名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="生效日期" prop="startdate">
        <el-date-picker clearable
                        v-model="queryParams.startdate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择生效日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="失效日期" prop="enddate">
        <el-date-picker clearable
                        v-model="queryParams.enddate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择失效日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
          <el-option
            v-for="dict in dict.type.yes_no_audit"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="物料编码（结算价分录）" prop="params.materialnumber">
        <el-input
          v-model="queryParams.params.materialnumber"
          placeholder="请输入物料编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="物料名称（结算价分录）" prop="params.materialname">
        <el-input
          v-model="queryParams.params.materialname"
          placeholder="请输入物料名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['settlementCenter/basedata:settlementprice:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['settlementCenter/basedata:settlementprice:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['settlementCenter/basedata:settlementprice:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['settlementCenter/basedata:settlementprice:export']"
        >导出
        </el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-switch-->
<!--          v-model="isexpandAll"-->
<!--          active-color="#13ce66"-->
<!--          inactive-color="#ff4949"-->
<!--          active-value="true"-->
<!--          inactive-value="false"-->
<!--        >-->
<!--        </el-switch>-->
<!--      </el-col>-->
      <right-toolbar  :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading"
              :row-class-name="rowBillHeadIndex"
              :data="settlementpriceList"
              :default-expand-all="true"
              class="parentTable"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <!--      <el-table-column label="ID" align="center" prop="id" />-->
      <el-table-column label="序号" align="center" prop="index" width="50"/>
      <el-table-column type="expand">
        <template slot-scope="props">
<!--          <div class="conWrap" style="text-align: left;line-height: 16px;font-size: 14px;position: relative;top: -10px;">-->
<!--            <span>价格策略名称：{{props.row.pricetactics}}</span>-->
<!--            <span style="margin-left:42px;">生效日期：{{props.row.startdate}}</span>-->
<!--            <span style="margin-left:42px;">失效日期：{{props.row.enddate}}</span>-->
<!--          </div>-->
          <el-table v-bind:data="props.row.omsSettlementpriceentryList" :row-class-name="rowBillHeadIndex" :default-expand-all="true" :show-header="true" max-height="600px" class="childTable">
            <el-table-column label="序号" align="center" prop="index" width="50"/>
            <el-table-column align="center"
                             label="物料编码"
                             width="180">
              <template slot-scope="scope">
                <div class="name-b">{{scope.row.materialnumber}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="materialname" align="center"
                             label="物料名称"
                             width="180">
              <template slot-scope="scope">
                <div class="name-b">{{scope.row.materialname}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="price" align="center"
                             label="结算单价"
                             width="180">
              <template slot-scope="scope">
                <div class="name-b">{{scope.row.price}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="primecostprice" align="center"
                             label="测算价（成本价）"
                             width="180">
              <template slot-scope="scope">
                <div class="name-b">{{scope.row.primecostprice}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="joinprice" align="center"
                             label="加盟商价"
                             width="180">
              <template slot-scope="scope">
                <div class="name-b">{{scope.row.joinprice}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="maintainprice" align="center"
                             label="维护价"
                             width="180">
              <template slot-scope="scope">
                <div class="name-b">{{scope.row.maintainprice}}</div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center" prop="pricetactics"/>
      <!--      <el-table-column label="销售组织编码" align="center" prop="saleorgnumber" />-->
      <!--      <el-table-column label="销售组织名称" align="center" prop="saleorgname" />-->
      <el-table-column label="生效日期" align="center" prop="startdate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startdate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="失效日期" align="center" prop="enddate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.enddate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.yes_no_audit" :value="scope.row.status"/>
        </template>
      </el-table-column>
<!--      <el-table-column label="结算价分录">-->
<!--        <template slot-scope="scope">-->
<!--          <el-table :data="scope.row.omsSettlementpriceentryList" style="margin:0;">-->
<!--            <el-table-column prop="materialnumber" label="物料编码"></el-table-column>-->
<!--            <el-table-column prop="materialnumber" label="物料名称"></el-table-column>-->
<!--            <el-table-column prop="materialnumber" label="结算单价"></el-table-column>-->
<!--            <el-table-column prop="materialnumber" label="测算价（成本价）"></el-table-column>-->
<!--            <el-table-column prop="materialnumber" label="加盟商价"></el-table-column>-->
<!--            <el-table-column prop="materialnumber" label="维护价"></el-table-column>-->
<!--          </el-table>-->
<!--        </template>-->
<!--      </el-table-column>-->

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['settlementCenter/basedata:settlementprice:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['settlementCenter/basedata:settlementprice:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改结算价对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="名称" prop="pricetactics">
              <el-input v-model="form.pricetactics" placeholder="请输入名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生效日期" prop="startdate">
              <el-date-picker clearable
                              style="width: 380px"
                              v-model="form.startdate"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择生效日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="失效日期" prop="enddate">
              <el-date-picker clearable
                              style="width: 380px"
                              v-model="form.enddate"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择失效日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择状态" style="width: 380px">
                <el-option
                  style="width: 380px"
                  v-for="dict in dict.type.yes_no_audit"
                  :key="dict.value"
                  :label="dict.label"
                  :value="Number(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!--        <el-form-item label="销售组织编码" prop="saleorgnumber">-->
        <!--          <el-input v-model="form.saleorgnumber" placeholder="请输入销售组织编码" />-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="销售组织名称" prop="saleorgname">-->
        <!--          <el-input v-model="form.saleorgname" placeholder="请输入销售组织名称" />-->
        <!--        </el-form-item>-->



        <el-divider content-position="center">结算价分录信息</el-divider>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddOmsSettlementpriceentry">添加</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteOmsSettlementpriceentry">删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-plus" size="mini" @click="importTemplate">下载导入模板</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-plus" size="mini" @click="importExcel">导入数据</el-button>
          </el-col>
        </el-row>
        <el-table
          height="500px"
          :data="omsSettlementpriceentryList"
          :row-class-name="rowOmsSettlementpriceentryIndex"
                  @selection-change="handleOmsSettlementpriceentrySelectionChange"
          ref="omsSettlementpriceentry"
          border
          stripe
        >
          <el-table-column type="selection" width="50" align="center"/>
          <el-table-column label="序号" align="center" prop="index" width="50"/>
          <el-table-column sortable label="物料编码" prop="materialnumber" width="150">
            <template slot-scope="scope">
              <el-input class="rule-input" @change="materiaChange(scope.row)" v-model="scope.row.materialnumber" placeholder="请输入物料编码"/>
            </template>
          </el-table-column>
          <!--          <el-table-column label="物料编码" prop="materialnumber" width="150">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-select-->
          <!--                ref="selectDom"-->
          <!--                v-model="scope.row.materialnumber"-->
          <!--                multiple-->
          <!--                filterable-->
          <!--                placeholder="请输入物料编码"-->
          <!--                remote-->
          <!--                :remote-method="timegetMaterialValue"-->
          <!--                @visible-change="visibleChange">-->
          <!--                  <el-option-->
          <!--                    v-for="item in materialOptions"-->
          <!--                    :key="item.materialnumber"-->
          <!--                    :label="item.materialname"-->
          <!--                    :value="item.materialnumber">-->
          <!--                  </el-option>-->
          <!--              </el-select>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column label="物料名称" prop="materialname" width="150">
            <template slot-scope="scope">
              <el-input class="rule-input" v-model="scope.row.materialname" placeholder="请输入物料名称" readonly/>
            </template>
          </el-table-column>
          <el-table-column label="标准零售价" prop="price" width="150">
            <template slot-scope="scope">
              <el-input class="rule-input" v-model="scope.row.price" placeholder="请输入结算单价"/>
            </template>
          </el-table-column>
          <el-table-column label="测算价" prop="primecostprice" width="150">
            <template slot-scope="scope">
              <el-input class="rule-input" v-model="scope.row.primecostprice" placeholder="请输入测算价"/>
            </template>
          </el-table-column>
          <el-table-column label="加盟商价" prop="joinprice" width="150">
            <template slot-scope="scope">
              <el-input class="rule-input" v-model="scope.row.joinprice" placeholder="请输入加盟商价"/>
            </template>
          </el-table-column>
          <el-table-column label="维护价" prop="maintainprice" width="150">
            <template slot-scope="scope">
              <el-input class="rule-input" v-model="scope.row.maintainprice" placeholder="请输入维护价"/>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog :title="excel.title" :visible.sync="excel.show" width="400px">
      <template v-show="excel.show">
        <div>
          <div class="container">
            {{ excel.upload_file || "导入" }}
            <input
              type="file"
              accept=".xls,.xlsx"
              class="upload_file"
              :value="excel.data"
              @change="readExcel($event)"
            />
          </div>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script>
  import {
    listSettlementprice,
    getSettlementprice,
    delSettlementprice,
    addSettlementprice,
    updateSettlementprice,
    queryMaterial,
    queryMaterialObject
  } from "@/api/settlementCenter/basedata/settlementprice";
  import XLSX from "xlsx";

  export default {
    name: "Settlementprice",
    dicts: ['yes_no_audit'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 子表选中数据
        checkedOmsSettlementpriceentry: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 结算价表格数据
        settlementpriceList: [],
        // 结算价分录表格数据
        omsSettlementpriceentryList: [],
        // 物料集合
        materialList: [],
        materialOptions: [],
        //是否展开所有行
        isexpandAll: false,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // excel导入相关参数
        excel:{
          show:false,
          upload_file: "",
          data : ""
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          pricetactics: null,
          saleorgnumber: null,
          saleorgname: null,
          startdate: null,
          enddate: null,
          status: null,
          params:{
            materialnumber: null,
            materialname: null
          }
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {}
      };
    },
    created() {
      this.getList();
    },
    mounted() {
      // this.initMaterial();
    },
    methods: {
      /** 查询结算价列表 */
      getList() {
        this.loading = true;
        listSettlementprice(this.queryParams).then(response => {
          this.settlementpriceList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          pricetactics: null,
          saleorgnumber: null,
          saleorgname: null,
          startdate: null,
          enddate: null,
          status: 0
        };
        this.omsSettlementpriceentryList = [];
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        // this.queryParams.params = null;
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加结算价";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getSettlementprice(id).then(response => {
          this.form = response.data;
          this.omsSettlementpriceentryList = response.data.omsSettlementpriceentryList;
          this.open = true;
          this.title = "修改结算价";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$modal.msg("正在保存中，请稍等...")
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.omsSettlementpriceentryList = this.omsSettlementpriceentryList;
            if (this.form.id != null) {
              updateSettlementprice(this.form).then(response => {
                switch (response.data) {
                  case -1:
                    this.$modal.msgError("修改失败:物料不能重复");
                    break;
                  case -2:
                    this.$modal.msgError("修改失败:业务日期不能为空");
                    break;
                  case -3:
                    this.$modal.msgError("修改失败:业务日期与已存在的数据有交集");
                    break;
                  case -4:
                    this.$modal.msgError("修改失败:名称不能为空");
                    break;
                  case -5:
                    this.$modal.msgError("修改失败:状态为已审核的数据分录不能为空");
                    break;
                  case -6:
                    this.$modal.msgError("修改失败:名称为" + this.form.pricetactics + "的数据已存在");
                    break;
                  case -7:
                    this.$modal.msgError("修改失败:状态为已审核的数据，分录不能为空");
                    break;
                  case -8:
                    this.$modal.msgError("修改失败:物料编码及名称不能为空");
                    break;
                  case -9:
                    this.$modal.msgError("修改失败:分录中的物料不存在");
                    break;
                  case -10:
                    this.$modal.msgError("修改失败:失效日期要大于生效日期");
                    break;
                  case -11:
                    this.$modal.msgError("修改失败:四种价格至少填一个");
                    break;
                  default :
                    if(response.data>0){
                      this.$modal.msgSuccess("修改成功");
                      this.open = false;
                      this.getList();
                    }else{
                      this.$modal.msgError("修改成功：请核验数据");
                    }
                }
              });
            } else {
              addSettlementprice(this.form).then(response => {
                switch (response.data) {
                  case -1:
                    this.$modal.msgError("新增失败:物料不能重复");
                    break;
                  case -2:
                    this.$modal.msgError("新增失败:业务日期不能为空");
                    break;
                  case -3:
                    this.$modal.msgError("新增失败:业务日期与已存在的数据有交集");
                    break;
                  case -4:
                    this.$modal.msgError("新增失败:名称不能为空");
                    break;
                  case -5:
                    this.$modal.msgError("新增失败:状态为已审核的数据分录不能为空");
                    break;
                  case -6:
                    this.$modal.msgError("新增失败:名称为" + this.form.pricetactics + "的数据已存在");
                    break;
                  case -7:
                    this.$modal.msgError("新增失败:状态为已审核的数据，分录不能为空");
                    break;
                  case -8:
                    this.$modal.msgError("新增失败:物料编码及名称不能为空");
                    break;
                  case -9:
                    this.$modal.msgError("新增失败:分录中的物料不存在");
                    break;
                  case -10:
                    this.$modal.msgError("新增失败:失效日期要大于生效日期");
                    break;
                  case -11:
                    this.$modal.msgError("新增失败:四种价格至少填一个");
                    break;
                  default :
                    if(response.data>0){
                      this.$modal.msgSuccess("新增成功");
                      this.open = false;
                      this.getList();
                    }else{
                      this.$modal.msgError("新增失败：请核验数据");
                    }
                }
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除结算价编号为"' + ids + '"的数据项？').then(function () {
          return delSettlementprice(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {
        });
      },
      /** 结算价分录序号 */
      rowOmsSettlementpriceentryIndex({row, rowIndex}) {
        row.index = rowIndex + 1;
      },
      /** 结算价分录添加按钮操作 */
      handleAddOmsSettlementpriceentry() {
        let obj = {};
        obj.parentid = "";
        obj.materialnumber = "";
        obj.materialname = "";
        obj.price = "";
        obj.primecostprice = "";
        obj.joinprice = "";
        obj.maintainprice = "";
        this.omsSettlementpriceentryList.push(obj);
      },
      /** 结算价分录删除按钮操作 */
      handleDeleteOmsSettlementpriceentry() {
        if (this.checkedOmsSettlementpriceentry.length == 0) {
          this.$modal.msgError("请先选择要删除的结算价分录数据");
        } else {
          const omsSettlementpriceentryList = this.omsSettlementpriceentryList;
          const checkedOmsSettlementpriceentry = this.checkedOmsSettlementpriceentry;
          this.omsSettlementpriceentryList = omsSettlementpriceentryList.filter(function (item) {
            return checkedOmsSettlementpriceentry.indexOf(item.index) == -1
          });
        }
      },
      /** 复选框选中数据 */
      handleOmsSettlementpriceentrySelectionChange(selection) {
        this.checkedOmsSettlementpriceentry = selection.map(item => item.index)
      },
      /** 单据头序号 */
      rowBillHeadIndex({row, rowIndex}) {
        row.index = rowIndex + 1;
        let rowName = "",
          findRow = this.ids.indexOf(row.id);
        if (findRow !== -1) {
          rowName = "current-row ";
        }
        row.index = rowIndex + 1;
        return rowName; //也可以再加上其他类名 如果有需求的话
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('settlementCenter/basedata/settlementprice/export', {
          ...this.queryParams
        }, `settlementprice_${new Date().getTime()}.xlsx`)
      },
      materiaChange(val) {
        //查询物料
        if (val.materialnumber === "") {
          val.materialname = "";
        } else {
          queryMaterialObject(val.materialnumber).then(response => {
            // 数据源
            if(response.data == null
              ||response.data.materialname == null||response.data.materialname === ""){
              val.materialname = "";
            }else{
              val.materialname = response.data.materialname;
            }
          });
        }
      },
      //下载分录模板
      importTemplate() {
        this.download('/settlementCenter/basedata/settlementprice/importTemplate', {
        }, `settlementpriceentry_template_${new Date().getTime()}.xlsx`)
        // importTemplate().then(response => {
        //   this.download(response.msg);
        // });
      },
      // 点击进行导入
      importExcel() {
        this.excel.upload_file = "";
        this.excel.data = "";
        this.excel.show = true;
      },
      //解析导入的excel文件
      readExcel(e) {
        // 读取表格文件
        console.log("读取表格文件")
        let that = this;
        const files = e.target.files;
        if (files.length <= 0) {
          return false;
        } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
          this.$message({
            message: "上传格式不正确，请上传xls或者xlsx格式",
            type: "warning"
          });
          return false;
        } else {
          // 更新获取文件名
          that.excel.upload_file = files[0].name;
          console.log("that.excel.upload_file = files[0].name;")
        }

        const fileReader = new FileReader();
        console.log("new FileReader();")
        fileReader.onload = ev => {
          try {
            const data = ev.target.result;
            console.log("const data = ev.target.result;")
            const workbook = XLSX.read(data, {
              type: "binary"
            });
            console.log("XLSX.read")
            const wsname = workbook.SheetNames[0]; //取第一张表
            console.log("//取第一张表")
            const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
            console.log("//生成json表格内容")

            // 从解析出来的数据中提取相应的数据
            ws.forEach(item => {
              this.omsSettlementpriceentryList.push({
                materialnumber : item["物料编码"],
                materialname : item["物料名称"],
                price : item["结算单价"],
                primecostprice : item["测算价"],
                joinprice : item["加盟商价"],
                maintainprice : item["维护价"]
              });
              console.log("//开始解析插入数据")
            });
            // this.excel.data = "";
            // 结束解析动画
            // excel.upload_file = "";
            this.excel.show = false;
          } catch (e) {
            return false;
          }
        };
        fileReader.readAsBinaryString(files[0]);
      }
    }
  };
</script>
<style lang="scss" scoped>
.el-table {
  border-top: none !important;
}

.el-table__expanded-cell {
  padding: 0 !important;
}

.tableWrap {
  width: 100%;
}

.el-tabs__nav-scroll {
  padding: 0 20px;
  box-sizing: border-box;
}

.tableWrap .el-table {
  width: 1240px;
  margin: 0 auto;
}

.el-icon.el-icon-arrow-right {
  color: #fff;
}

.el-table__row.expanded {
  background: #fff !important;
  position: relative !important;
  top: -100px !important;
  border: 1px solid red;
}

.el-tabs__content {
  display: none;
}

.el-table__row.expanded > td {
  padding: 7px 0;
}

.el-table__row.expanded {
  border: 1px solid #E5E5E5;
}

.el-table__row.expanded:first-child {
  border-bottom: none;
}
.childTable1{
  margin-left: 400px;
  width: 500px;
}.childTable{
  margin-left: 200px;
  width: 1147px;
}
.childTable .el-table__body {
  border-top: 1px solid #E5E5E5;
}

.childTable .el-table__row.expanded > td:first-child {
  border-left: 1px solid #E5E5E5;
}

.childTable .el-table__row.expanded > td:last-child {
  border-right: 1px solid #E5E5E5;
}

.el-tabs__header.is-top {
  border-bottom: none;
}

//.childTable .el-table__header-wrapper {
//  display: none;
//}

.conWrap {
  height: 44px;
  background: #E5E5E5;
  line-height: 44px;
  padding-left: 10px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  line-height: 19px;
  color: #333333;
}

.conWrap > span {
  line-height: 44px;
}

.el-table .has-gutter .is-leaf {
  position: relative !important;
  left: -48px !important;
}

.el-table .has-gutter .is-leaf:last-child {
  position: relative !important;
  left: 0px !important;
}

.el-table__header-wrapper {
  background: #EBEBEB;
}

.el-table .has-gutter > tr > th {
  background: #EBEBEB;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 19px;
  color: #333333;
}

.inputBox{
  width: 300px;
}
.rule-input ::v-deep {
  .el-input__inner {
    border: 0;
  }
  .el-input__inner:focus {
    border: 1px solid #000000;
  }
}

</style>
